<script setup lang='ts'>
import { useMainStore } from '@/store/index'
import { ref,onMounted } from 'vue'
const store = useMainStore()
const checked1 = ref(true)
const checked2 = ref(true)
let loading:any;

onMounted(async () => {})

const changelayer = (number,flag) => {
  if(!flag) {
    loading = ElLoading.service({ text: "正在加载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  }
  if(number == 0) {
    window.cjWmslayer.show = !checked1.value
    let time = setInterval(()=> {
      loading.close()
      clearInterval(time)
    },2000)
  }else {
    window.sytdlzwma.show = !checked2.value
    let time = setInterval(()=> {
      loading.close()
      clearInterval(time)
    },2000)
  }
}

</script>

<template>
  <!-- 图层 -->
  <div class="TabbarBtn">
    <div>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="图层"
        placement="left"
      >
      <div :class="store.activeBtn==2?'iconBox show':'iconBox'" @click="store.activeBtn==2?store.activeBtn=0:store.activeBtn=2">
        <img src="@/assets/image/layer.png" alt="">
      </div>
      </el-tooltip>
    </div>

    <div :class="store.activeBtn==2?'btnTooltip show':'btnTooltip'">
      <span class="listBox" style="padding-top: 20px;">
        <i @click="store.activeBtn=0" class="iconfont icon-cuo" style="position: absolute;right: 10px; top: 10px;cursor: pointer;"></i>
        <div class="listBox-layer">
          <el-checkbox v-model="checked1" label="村  界" size="large" @click="changelayer(0,checked1)" />
          <el-checkbox v-model="checked2" label="农场信息" size="large" @click="changelayer(1,checked2)" />
        </div>
      </span>
    </div>
  </div>
</template>

<style scoped>
.endDrawer,
.clearMeasure{
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  background: #3DBDA7;
  color: #fff;
  cursor: pointer;
}
.clearMeasure {
  background: #FF8D1A;
}
</style>
<style>
  .endDrawerButton {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}
</style>
